<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JAVAscript练习</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
		<style>
			li a {
				float: right;
			}
		</style>
		<script>
			function getFirstChild(obj) {
				if(obj.firstElementChild) {
					return obj.firstElementChild
				} else {
					return obj.firstChild
				}
			}

			function getLastChild(obj) {
				if(obj.lastElementChild) {
					return obj.lastElementChild
				} else {
					return obj.lastChild
				}
			}

			function getPreviousSibling(obj) {
				if(obj.previousElementSibling) {
					return obj.previousElementSibling
				} else {
					return obj.previousSibling
				}
			}

			function getNextSibling(obj) {
				if(obj.nextElementSibling) {
					return obj.nextElementSibling
				} else {
					return obj.nextSibling
				}
			}
			window.onload = function() {
				var oDiv1 = document.getElementById('div1');
				var aDiv1 = oDiv1.getElementsByTagName('div')[0];
				var aBtn1 = aDiv1.getElementsByTagName('button');
				var aUla1 = aDiv1.getElementsByTagName('ul');
				aBtn1[0].onclick = function() {
					//getFirstChild (aUla1[0]).innerHTML='none'
					if(aUla1[0].firstElementChild) {
						aUla1[0].firstElementChild.innerHTML = '当前浏览器支持的首节点函数是firstElementChild'
					} else {
						aUla1[0].firstChild.innerHTML = '当前浏览器支持的首节点函数是firstChild'
					}
				}
				aBtn1[1].onclick = function() {
					getLastChild(aUla1[0]).innerHTML = '这是尾节点'
				}

				var oDiv2 = document.getElementById('div2');
				var aDiv2 = oDiv2.getElementsByTagName('div');
				var aBtn2 = aDiv2[0].getElementsByTagName('button');
				var aUla3 = aDiv2[0].getElementsByTagName('ul');
				var aLia3 = aUla3[0].getElementsByTagName('li');
				aBtn2[0].onclick = function() {
					alert(getPreviousSibling(aLia3[1]).innerHTML)
				}
				aBtn2[1].onclick = function() {
					alert(getNextSibling(aLia3[1]).innerHTML)
				}
			}
		</script>
	</head>

	<BODY>
		<pre><h1>JAVAscript练习</a></h1></pre>
		<div id="div1" class="box box-re form-inline">
			1、DOM节点 首尾子节点<br><br>
			<div class="box box-re">
				例1：首尾节点<br><br>
				<ul class="list-group">
					<li class="list-group-item">子节点1 首节点</li>
					<li class="list-group-item">子节点2</li>
					<li class="list-group-item">子节点2 尾节点</li>
				</ul>
				<button class="btn btn-info">修改首节点文字</button> <code>firstChild & firstElementChild</code><br><br>
				<button class="btn btn-info">修改尾节点文字</button> <code>lastChild & lastElementChild</code>
			</div>
		</div>

		<div id="div2" class="box box-re form-inline">
			2、DOM节点 兄弟节点<br><br>
			<div class="box box-re">
				例1：首尾节点<br><br>
				<ul class="list-group">
					<li class="list-group-item">子节点1 首节点</li>
					<li class="list-group-item">子节点2</li>
					<li class="list-group-item">子节点2 尾节点</li>
				</ul>
				<button class="btn btn-info">查看子节点2前兄弟节点</button> <code>previousSibling & previousElementSibling</code><br><br>
				<button class="btn btn-info">查看子节点2后兄弟节点</button> <code>nextSibling & nextElementSibling</code>
			</div>
		</div>

		<div id="Record" class="box box-re red">
			记录<br>
			<p><b>首尾子节点：</b>firstChild & firstElementChild / lastChild & lastElementChild</p>
			<p><b>兄弟子节点：</b>previousSibling & previousElementSibling / nextSibling & nextElementSibling</p>
			<p><b>兼容问题：</b>都是通过判断来解决兼容问题</p>
		</div>

	</BODY>

</HTML>